<template>
  <div v-if="config.show === undefined || config.show" class="container page-header-container">
    <div class="content">
      <div class="left">
        <div v-if="config.return === undefined || config.return" class="img-box return" @click="handleReturn">
          <img src="../../assets/images/return.png">
        </div>
        <div v-if="config.search" class="img-box search-icon-container" @click="handleSearch">
          <img src="../../assets/images/searcht.png">
        </div>
        <div v-if="config.left" class="slot-left" @click="handleLeftClick" v-html="config.left"></div>
      </div>
      <div class="center">
        {{ config.title || '报表' }}
      </div>
      <div class="right">
        <div v-if="config.right" class="slot-right" @click="handleRightClick" v-html="config.right"></div>
        <div v-if="config.home" class="img-box" @click="handleHome">
          <img src="../../assets/images/home.png">
        </div>
        <div v-if="(config.close === undefined || config.close)" class="img-box close" @click="handleClose">
          <img src="../../assets/images/close.png">
        </div>
        <div v-if="config.cancel" class="cancel" @click="handleCancel">
          取消
        </div>
        <div v-if="config.save" class="cancel" @click="handleSave">
          保存
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { readyApi } from 'hwork-widget-report-component/src/utils/index'
export default {
  name: 'SubHeader',
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {

  },
  methods: {
    /* 返回*/
    handleReturn() {
      this.config.returnEvent ? this.config.returnEvent() : this.$router.go(-1)
    },
    /* 搜索*/
    handleSearch() {
      this.config.searchEvent ? this.config.searchEvent() : null
    },
    /* 回到首页*/
    handleHome() {
      this.config.homeEvent ? this.config.homeEvent() : this.$router.push({ path: this.config.home })
    },
    /* 关闭*/
    handleClose() {
      readyApi(() => {
        window.AlipayJSBridge.call('exitApp')
      })
    },
    /* 取消*/
    handleCancel() {
      this.config.cancel ? this.config.cancel() : null
    },
    /* 自定义左侧内容*/
    handleLeftClick() {
      this.config.leftEvent ? this.config.leftEvent() : null
    },
    /* 自定义右侧内容*/
    handleRightClick() {
      this.config.rightEvent ? this.config.rightEvent() : null
    },
    /* 保存*/
    handleSave() {
      this.config.save ? this.config.saveEvent() : null
    }
  }
}
</script>

<style lang="scss" scoped>
	$button-opacity: 0.7;
	@mixin mixin-img {
		height:100%;
		display: flex;
		align-items: center;
		padding: 0 .08rem;
	}
	.container {
		height: 0.4rem;
		background-color: #fff;
		position: fixed;
		z-index: 20000;
		width: 100vw;
		top:0;
		.content {
			height: .3rem;
			position: absolute;
			bottom: .05rem;
			width: 100%;
			justify-content: space-between;
			display: flex;
			.left {
				height:100%;
				display: flex;
				padding-left: .05rem;
				.slot-left {
					margin-left: .07rem;
					height: .3rem;
					width: .3rem;
				}
				.img-box {
					@include mixin-img;
					padding: 0 .08rem;
					>img {
						height:.2rem;
					}
					&:active {
						>img {
							opacity: $button-opacity;
						}
					}
				}
			}
			.center {
				width: 1.8rem;
				position: absolute;
				left: calc(50% - 0.9rem);
				text-align: center;
				font-size: .16rem;
				line-height: .3rem;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: 500;
				color: #000000;
			}
			.right {
				height:100%;
				display: flex;
				.slot-right {
					margin-right: .07rem;
					height: .3rem;
					width: .3rem;
				}
				.img-box {
					@include mixin-img;
					>img {
						height:.2rem;
					}
					&:active {
						>img {
							opacity: $button-opacity;
						}
					}
				}
				.close {
					>img {
						height:.25rem;
					}
					&:active {
						>img {
							opacity: $button-opacity;
						}
					}
				}
				.cancel {
					font-size: 0.16rem;
					color: #157EFB;
					line-height: .3rem;
					padding: 0 .08rem;
				}
			}
		}
	}
</style>

